<script>

import {addArticle, articleList, checkDea, delArticle, editArticle, selectArticle} from "../../api/articlesAPI/https";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import {quillEditor} from "vue-quill-editor";
import item from "../../layout/components/Sidebar/Item.vue";

// import {mapState} from 'vuex'
// import Log from "@/views/monitor/job/log.vue";
// import store from "@/store";
import {getToken} from "@/utils/auth";


export default {
  name: "index",
  computed: {
    item() {
      return item
    },
  },
  // 富文本插件
  components: {
    quillEditor
  },
  data() {
    return {
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      action: process.env.VUE_APP_BASE_API + "/common/upload",
      current: 1,
      total: 30,
      imageUrl: '',
      itemList: {},
      dialogVisibleImg: false,
      dialogVisibledel: false,
      editorOption: {
        placeholder: "请输入文章内容",
      },
      content: '',
      value: '',
      options: [],
      categoryId: '',
      input0: '',
      input: '',
      query: {
        pageNum: 1,
        pageSize: 10,
        title: ''
      },
      tableData: [],
      query0: {
        pageSize: 1000,
        pageNum: 1,
      },

      dialogVisible: false,
      dialogVisible0: false,
      listId: '',
      listObj: [],
      title: '添加文章'
    }
  },
  methods: {
    change(val) {
      console.log(val)
      this.categoryId = val
    },
    // 搜索
    search() {
      this.query.title = this.input0
      articleList(this.query).then(res => {
        if (res.code === 200) {
          this.tableData = res.rows
          this.total = Number(res.total)
        }
      })
    },
    handleCurrentChange(val) {
      this.query.pageNum = val
      articleList(this.query).then(res => {
        if (res.code === 200) {
          this.tableData = res.rows
        }
      })
    },
    // 失去焦点事件
    onEditorBlur() {
    },
    // 获得焦点事件
    onEditorFocus() {
    },
    // 准备编辑器
    onEditorReady() {
    },
    // 内容改变事件
    onEditorChange() {
    },
    //查看
    checkDetail(item) {
      this.dialogVisible0 = true
      this.listId = item.id
      checkDea(this.listId).then(res => {
        if (res.code === 200) {
          this.listObj = res.data
        }
      })
    },
    // 添加
    addArticle() {
      this.dialogVisible = true
      this.input = ''
      this.value = ''
      this.content = ''
      this.imageUrl = ''
    },
    // 打开编辑
    editArticle0(item) {
      console.log(item)
      this.itemList = item.avatar
      this.title = '编辑文章'
      this.listId = item.id
      this.imageUrl = item.avatar
      this.dialogVisible = true
      this.input = item.title
      this.categoryId = item.categoryId
      this.value = item.psyCategoryVo.name
      this.content = item.content
    },
    // 编辑保存
    serveArticle() {
      console.log(this.imageUrl)
      if (this.title === '编辑文章') {
        editArticle({
          id: this.listId,
          title: this.input,
          categoryId: this.categoryId,
          content: this.content,
          titlePicture: this.imageUrl
        }).then(res => {
          console.log(res)
          this.getArticle()
          this.$message.success('保存成功');
        })
      } else {
        addArticle({
          title: this.input,
          categoryId: this.categoryId,
          content: this.content,
          titlePicture: this.imageUrl,
          weight: 0
        }).then(res => {
          this.$message.success('添加成功');
          console.log(res)
          this.getArticle()
        })
      }
      this.dialogVisible = false
    },
    //重置
    reset() {
      this.current = 1
      this.input0 = ''
      this.query.title = ''
      this.query.pageNum = 1
      this.query.pageSize = 10
      // this.total=30
      articleList(this.query).then(res => {
        if (res.code === 200) {
          console.log(res)
          this.total = Number(res.total)
          this.tableData = res.rows
          // this.$store.commit('changeTab',{ tableData: res})
          console.log(this.tableData)
        }
      })
    },
    //删除
    deleteArticle(item) {
      console.log(item)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delArticle(item.id).then(res => {
          console.log(res)
          this.getArticle()
        })
        this.$message({
          type: 'success',
          message: '删除成功!',
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //渲染
    getArticle() {
      articleList(this.query).then(res => {
        if (res.code === 200) {
          console.log(res)
          this.tableData = res.rows
          console.log(this.tableData)
        }
      })
    },
    //图片更改
    handleAvatarSuccess(res, file) {
      console.log(res)
      console.log(file)
      this.imageUrl = file.response.url
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  },


  created() {
    articleList(this.query).then(res => {
      if (res.code === 200) {
        console.log(res)
        this.total = Number(res.total)
        this.tableData = res.rows
      }
    })
    selectArticle(this.query0).then(res => {
      if (res.code === 200) {
        this.options = res.rows
      }
    })

  },
}
</script>

<template>
  <div class="article">
    <!--    头部-->
    <div class="articleHead">
      <!--      头部左侧-->
      <div class="headLeft">
        <span>文章管理</span>
        <el-input v-model="input0" placeholder="请输入文章名称" class="int"></el-input>
        <el-button type="primary" class="add" @click="addArticle">添加</el-button>
        <el-dialog
          :title="title"
          :visible.sync="dialogVisible"
          width="60%"
        >
          <div class="addTitle" style="overflow: hidden">
            <div class="articleTitle" style="overflow: hidden">
              <p class="articleTitletText">文章标题</p>
              <el-input v-model="input" placeholder="请输入标题名称" class="titleInt"></el-input>
            </div>
            <div class="backImg" style="overflow: hidden">
              <p class="backTitle">封面图片</p>
              <el-upload
                :headers="headers"
                class="avatar-uploader"
                :action="action"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="`http://1.117.81.216:8086/stage-api${this.imageUrl}`" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
            <div class="selectArticle">
              <p class="selectTitle">选择文章栏目</p>
              <el-select placeholder="请选择" style="width: 200px;height: 30px;margin-top: -3px" v-model="value"
                         @change=change(value)>
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
            <div class="articleText">
              <p class="articleContent">文章内容</p>
              <div>
                <quill-editor
                  ref="myQuillEditor"
                  v-model="content"
                  :options="editorOption"
                  @blur="onEditorBlur($event)"
                  @focus="onEditorFocus($event)"
                  @ready="onEditorReady($event)"
                  @change="onEditorChange($event)"
                />
              </div>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="serveArticle">保存</el-button>
  </span>

        </el-dialog>
      </div>
      <div class="headRight">
        <el-button class="default" @click="reset">重置</el-button>
        <el-button type="primary" class="search" @click="search">搜索</el-button>
      </div>
    </div>
    <div class="activeMain">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          align="center"
          type="index"
          label="序号"
          width="180"
        >
        </el-table-column>
        <el-table-column
          align="left"
          prop="title"
          label="文章名称"
        >
        </el-table-column>
        <el-table-column
          align="left"
          prop="author"
          label="发布人">
        </el-table-column>
        <el-table-column
          align="center"
          prop="sendTime"
          label="创建时间">
        </el-table-column>
        <el-table-column
          class-name="operate"
          fixed="right"
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="checkDetail(scope.row)">详情</el-button>
            <!--            <el-button type="text" size="small">编辑</el-button>-->
            <el-button type="text" size="small" @click="editArticle0(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="deleteArticle(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="文章详情"
      :visible.sync="dialogVisible0"
      width="60%"
      append-to-body
      :modal="false"
    >
      <p class="titleText">{{ listObj.title }}</p>
      <div class="contentText" v-html="listObj.content"></div>
      <span slot="footer" class="dialog-footer">
  </span>
    </el-dialog>
    <div class="activeBottom">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        class="paging"
        :pager-count="5"
        @current-change="handleCurrentChange"
        :current-page="current"
      >
      </el-pagination>
    </div>
  </div>

</template>

<style scoped lang="scss">
.article {
  width: 100%;
  padding: 30px;
  background-color: #fff;
  font-size: 14px;

  .articleHead {
    .headLeft {
      float: left;
      margin: 10px 0 65px 28px;
      position: relative;

      .int {
        height: 30px;
        line-height: 36px;
        width: 200px;
        margin-top: -8px;
        margin-left: 18px;
      }

      .add {
        margin-top: 9px;
        position: absolute;
        bottom: -55px;
        left: 0;
        padding: 3px 16px;
        border-radius: 4px;
        width: 80px;
        height: 30px;
      }
    }
  }

  .headRight {
    float: right;
    margin-top: 8px;
    margin-right: 24px;

    .default {
      padding: 3px 16px;
      font-size: 14px;
      border-radius: 4px;
      width: 80px;
      height: 30px;
    }

    .search {
      padding: 3px 16px;
      font-size: 14px;
      border-radius: 4px;
      width: 80px;
      height: 30px;
    }
  }
}

.operate {
  text-align: right;
  margin-right: 5px;
}

.paging {
  margin-top: 20px;
  margin-bottom: 50px;
  float: right;
}

::v-deep {
  .el-dialog {
    border-radius: 7px 7px 0 0;
  }

  .el-upload {
    width: 100px;
    height: 100px;
    background-color: #e6ebf5;

    i {
      margin-top: 40px;
    }

    img {
      width: 100px;
      height: 100px;
    }
  }

  .el-dialog__header {
    background-color: #1892ff;
    padding: 8px;
    padding-left: 20px;
    height: 40px;
    box-sizing: border-box;
    border-radius: 7px 7px 0 0;

    .el-dialog__title {
      color: #Fff;
      font-size: 14px;
    }

    .el-dialog__headerbtn {
      position: absolute;
      top: 13px;
      right: 20px;
      padding: 0;
      background: transparent;
      border: none;
      outline: none;
      cursor: pointer;
      font-size: 16px;
    }
  }

  .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }

  .el-dialog__body {
    padding: 50px;
    padding-top: 15px;
    padding-bottom: 26px;
    color: #606266;
  }

  .articleTitletText {
    width: 9%;
    float: left;
    min-width: 60px;
  }

  .titleInt {
    height: 39px;
    line-height: 36px;
    width: 89%;
    float: right;
    //margin-top: 7px;
  }

  .backImg {
    float: left;
    width: 38%;
    padding-top: 15px;
    min-width: 168px;

    .backTitle {
      float: left;
      width: 23%;
      min-width: 58px;
      margin-right: 18px;
    }
  }

  .el-upload--picture-card {
    border: 1px solid #dcdcdc;
  }

  .el-upload--picture-card i {
    font-size: 65px;
    margin-top: 35px;
  }

  .selectArticle {
    margin-top: 14px;
    float: right;
    min-width: 306px;
    width: 61%;

    .selectTitle {
      float: left;
      margin-top: 3px;
      margin-right: 16px;
    }
  }

  .articleText {
    float: left;
    width: 100%;

    .articleContent {
      width: 8%;
      //float: left;
      min-width: 60px;
    }
  }

  .ql-toolbar ql-snow {
    margin: 0 !important;
  }

  .ql-editor {
    height: 200px !important;
  }

  .editor {
    line-height: normal !important;
  }

  .el-dialog__footer {
    margin-top: -20px;
    padding: 20px;
    padding-top: 10px;
    text-align: center;
  }

}

.delTitle {
  background-color: #fff;
}

.titleText {
  color: #000;
  font-size: 25px;
  font-weight: 600;
  text-align: center;
}

.contentText {
  margin-top: 20px;
  background-color: #fafafa;
  padding: 22px;
  line-height: 28px;
  text-indent: 2em;
  margin-bottom: 18px;
  border-radius: 8px;
}

::v-deep .el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell {
  border-bottom: 1px solid #dfe6ec;
  text-align: center;
}

::v-deep .el-table .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
</style>
